import React, { useState, useCallback } from 'react'

const App = () => {
	const [count, setCount] = useState(0)
	// 使用useCallback 后在Foo组件调用resetCount方法，Foo不会重新渲染
	// 没有使用则重新渲染
	const resetCount = useCallback(() => {
		setCount(0)
	}, [setCount])

	return (
		<div>
			<div>{count}</div>
			<Foo resetCount={resetCount} />
		</div>
	)
}

// count发生改变  Foo不需要重新渲染，减少不必要的渲染
const Foo = memo((props) => {
	return (
		<div>
			<button onClick={props.resetCount}>resetCount</button>
		</div>
	)
})

export default App
